<link rel='stylesheet' href='css/sweet-alert.css'>
<script src='js/sweet-alert.min.js'></script>
<div id="menu">
	<div id="tieude">
    	<span>ĐĂNG NHẬP</span>
    </div>
	<form name='dangnhap' id='dangnhap' method='post' onSubmit="return ktdn()" action="xulydangnhap.php">
		<input type='text' placeholder='&nbsp;Tài khoản' name='taikhoan' >
		<input type='password' placeholder='&nbsp;Mật khẩu' name='matkhau' >
		<input type='submit' value='Đăng Nhập' class='nutnhan'/>
	</form>
	<script type='text/javascript'>
        $('#dangnhap').validate({
            rules:{
                taikhoan:{
                    required:true,   
                },
                matkhau:{
                    required:true,
                },                 
            },
            messages:{
                taikhoan:{
                    required:'Vui lòng nhập vào tài khoản của bạn',
                },
                matkhau:{
                    required:'Vui lòng nhập vào mật khẩu của bạn',
                },
            }
        });
    </script>
    <script>
		function createXHR() {
			var xmlhttp;
			if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
			} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			return xmlhttp;
		}
		function ktdn() {
			var tk = document.dangnhap.taikhoan.value;
			var mk = document.dangnhap.matkhau.value;
			if (tk != '' && mk != '') {
				var xhr = createXHR();
				xhr.open("get","xulydangnhap.php?taikhoan=" + tk + "&matkhau=" + mk,false);
				xhr.send(null);
				if (xhr.responseText.match("e1") != null) {
					swal({
						title: "",
						text: "Tên đăng nhập không tồn tại trong hệ thống",
						imageUrl: "images/e1.png"
					});
					return false;
				}
				else if (xhr.responseText.match("e2") != null) {
					swal({
						title: "",
						text: "Mật khẩu bạn nhập không chính xác",
						imageUrl: "images/e2.png"
					});	
					return false;
				}
				else return true;
			}
		}
	</script>
    <div style="width:80%;margin-left:auto;margin-right:auto;">
    	<img src="images/elf.gif" style="margin-right:10px" />
    	<img src="images/dw.gif" style="margin-left:10px" />
    </div>
</div>